<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 引入样式 -->
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<link rel="stylesheet" type="text/css" href="../css/search.css"/>
		
		<!-- 引入组件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="../js/new_file.js"></script>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<div id="app">				
			<header id="heads">
				<p class="shopping ">购物车</p>
				<p class="cShopping" @click="del">清空购物车</p>
			</header>
			<section id="nb" v-show="IsShow">
				<van-cell id="gwsp" v-for="(item, index) in result" :key="item.id" :name="item.id">
				    <van-card :title="item.title" :price="formatPrice(item.price)" :thumb="item.thumb">
					<div slot="footer" style="position: relative;">
						<div id="num">{{item.num}}</div>
						<van-stepper class="stepper" v-model="item.num" disable-input @change="onChange"></van-stepper>
						<van-button size="small" @click="tabDel" type="default"><van-icon name="delete"></van-icon></van-button>
					 </div>
					 </var-card>		 
				</van-cell>			
				<van-submit-bar :price="totalPrice" :disabled="!result.length" :button-text="submitBarText" @submit="onSubmit"></van-submit-bar>
			</section>  
			<section style="text-align: center;margin-top: 50%;" v-show="IsShowNull">
				<van-row>
					<van-col span="24">
						<van-icon id="bk" name="shopping-cart-o"></van-icon>
					</van-col>
					<van-col span="24" class="kk">
						购物车空空如也
					</van-col>
				</van-row>
			</section>
		</div>
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					IsShow: true,
					IsShowNull: false,
					result:[
					{id:"1",title:"国产红酒整箱装长城窖酿解百纳干红葡萄酒750ml",price: 200,num: 1,thumb: "../img/2.jpg"},
					{id:"2",title:"国产红酒整箱装长城窖酿解百纳干红葡萄酒750ml",price: 200,num: 1,thumb: "../img/113.jpg"},
					]
				},
				computed:{
					submitBarText(){
						return "提交订单"
					},
					totalPrice:function(){
						var sum = 0;
						for(var i = 0;i<this.result.length;i++){
							sum += this.result[i].price * this.result[i].num;
						}
						return sum;
					}
				},
				methods:{
					
					formatPrice(price){
						return (price / 100).toFixed(2);
					},
					onSubmit:function(){
						plus.webview.open("../Jshui.html","Jshui");
// 						var zj = ((this.totalPrice) / 100).toFixed(2);
// 						this.$toast('结算' + zj + "元");
					},
					onChange(value){
						setTimeout(() => {
							this.value = value;
						}, 500);
					},
					tabDel:function(value){						
						$("#gwsp").remove();
					},
					del:function(){	
						if (vm.IsShowNull == true) {
							this.$toast('购物车已清空');
						} else {
							this.$dialog.confirm({
								title: '提示',
								message: '确认清空购物车'
							}).then(() => {
								vm.IsShow = false;
								vm.IsShowNull = true;
							}).catch(() => {
								this.$toast("点击取消");
							});
						}
					}
				}
			})
		</script>
	</body>
</html>
